<template>
  <div class="workStation h100">
    <div class="left">
      <div class="my-app">
        <div
          class="app-item"
          v-for="(item, i) in appDataArr"
          :key="i"
          @click="goAppDetailPage(item)"
        >
          <div class="app-logo">
            <img :src="item.imgSrc" alt />
          </div>
          <div style="margin-top: 8px;font-weight: bold;">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="middle-left"></div>
    <div class="middle-right"></div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      appDataArr: this.$store.state.user.allAuth.appList
    };
  },
  created() {},
  mounted() {},
  methods: {
    goAppDetailPage(app) {
      let { href } = this.$router.resolve({
        path: app.router,
        params: {
          name: app.name,
          logoSrc: app.logoSrc
        }
      });
      this.$utils.setCurrentInfo();
      // localStorage.setItem("moduleInfo", app);
      window.open(href, "_blank");
      // this.$router.push({
      //   path: app.router,
      //   params: {
      //     name: app.name,
      //     logoSrc: app.logoSrc
      //   }
      // });
    },
    async getTodoItems() {
      let res = await todoItems();
      let data = res.data;
      this.todoList.forEach(item => {
        item.count = data[item.code] || 0;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.workStation {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 10px;
  display: flex;
  .left {
    flex: 1;
    margin: 0 10px;
    .my-app {
      height: 100%;
      //margin-top: 20px;
      display: flex;
      flex-flow: column wrap;
      .app-item {
        margin: 10px 0;
        cursor: pointer;

        .app-logo {
          margin: 0 auto;
          width: 64px;
          height: 64px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .middle-left {
    padding: 10px;
    flex: 2;
  }
  .middle-right {
    padding: 10px;
    flex: 2;
  }
  .right {
    padding: 0 10px;
    flex: 2;
  }
}
</style>

